// 柱状图叠加
import React from 'react';
import {parsePercent, numberHandle, safeMultiple} from '~/utils/number';
import CommonEchart from '~/page/FineBi/common/CommonEchart';
import {formatTooltip} from '../../utils';
import withPannel from '../withPannel';

const tooltipCallback = params => formatTooltip(params);

// 数据上的标签
const labelFormatter = (params = {}) => {
    const {
        data: {proportion = 0} = {},
        seriesType,
        value
    } = params;

    if (seriesType === 'bar') {
        return value ? numberHandle(value, 2) : '';
    }

    return value ? parsePercent(value, 1) : '';
};

const extendOptions = chart => ({
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left',
    },
    xAxis: {
        common: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
            // axisTick: {
            //     show: false
            // },
            // axisLabel: {
            //     show: false
            // },
        }
    },
    yAxis: {
        common: {
            type: 'category',
            data: chart?.xAxis?.[0]?.data,
            // splitLine: {show: false},
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        // newYAxis: [
        //     // 右侧轴
        //     {
        //         yAxisIndex: 1,
        //         name: '综合续班率-老学员',
        //     },
        //     {
        //         yAxisIndex: 1,
        //         name: '综合续班率-新学员',
        //     },
        // ],
        common: {
            stack: '总量',
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'inside', formatter: labelFormatter}
        }
    }
});

const StructureBarChart = props => {
    const {dataSource, unitId} = props;

    return (
        <CommonEchart
            {...props}
            id={unitId}
            height={700}
            extendEchartsOptions={extendOptions(dataSource?.chart)}
            dataSource={dataSource}
        />
    );
};

export default withPannel(StructureBarChart);
